<template>
	<view class="app">
		<u-navbar placeholder="true" title="授权登录" :autoBack="true"></u-navbar>
		<view class="column center">
			<view><image class="imag-logo" src="/static/images/logoy.png"></image></view>
			<view class="logo-v1"><text class="logo-text1">群众缘婚介</text></view>
			<view class="logo-v2"><text class="logo-text2">QUN ZHONG YUAN HUN JIE</text></view>
		</view>
		<view class="center aeadfe">
			<button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="toProviderLogin">
			<!-- <button style="background: #f34f4f;" class="input-content row center" :loading="loading" v-if="showp" type="primary" @click="h5dde"> -->
				<u-icon name="weixin-fill" color="#FFFFFF" size="20"></u-icon>
				<text>微信授权登录</text>
			</button>

			<button class="input-content" :loading="loading" type="primary" open-type="getPhoneNumber" @getphonenumber="getphone" v-else>获取电话</button>
		</view>
		<view class="input-content-qx" @click="tabBarUrl()">取消</view>
		<view class="input-content-xy center">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox size="14" activeColor="red" :checked="protocol ? true : false" shape="circle"></u-checkbox>
				<text class="tx">我已阅读并同意</text>
				<text class="xiexyi">《用户协议》</text>
			</u-checkbox-group>
		</view>
		
		
		<u-popup customStyle="width: 700rpx;height: 1200rpx;padding: 30rpx;" closeable=true bgColor="#FFFFFF" :show="showtc" mode="center" @close="close">
				<u-parse :content="content" ></u-parse>
		</u-popup>
		
		<!-- 头像+++++++++++++++++++++++++++++++++ -->
		<u-modal  :show="showAuthorizeUser" @confirm="confirm">
		    <view class="slot-content">
		        <div class="auth-card">
		            <div class="img">
		                <img class="avatar-img"
							 src="/static/images/logoy.png"
		                     mode="widthFix">
		            </div>
		            <div class="title">{{bname}}</div>
		            <div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
		        <div style="margin-left: 100rpx;margin-right: 100rpx">
		            <u-form :model="user" ref="uForm">
		                <u-form-item label="头像">
		                    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
		                        <image  style="height: 40rpx;width: 45rpx;margin-top: 25rpx;" :src="avatarUrl"></image>
		                    </button>
		                </u-form-item>
		                <u-form-item label="昵称">
		                    <input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/>
		                </u-form-item>
		            </u-form>
		        </div>
		        </div>
		  <!--  <div class="auth-btncard">
		        <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
		        <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
		    </div> -->
		    </view>
		</u-modal>
			<!-- 头像kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk -->
		
	</view>
</template>

<script>
import auth_api from '@/api/auth.js';
import api from '@/api/commonc.js';
export default {
	data() {
		return {
			nickName:'',//昵称
			avatarUrl:'/static/xs/ttt.png',
			// 是否弹出登录注册授权弹窗
			showAuthorizeUser: false,
			content: '', // 内容
			showtc: false,
			protocol: false,
			userInfo: {},
			iv: '',
			encryptedData: '',
			code: '',
			session_key: '',
			superior: 0,
			openid: '',
			showp: true,
			loading: false // 提交中
		};
	},
	onShow() {
		this.getcode();
		this.getInfo();
	},
	onLoad(option) {
		var superior = uni.getStorageSync('superior');
		if (superior) {
			this.superior = superior;
		}
	},
	methods: {
		
		confirm(){
			if (!this.nickName) {
				this.$util.msg('请填写昵称');
				return;
			}
			if (this.avatarUrl=='/static/xs/ttt.png') {
				this.$util.msg('请选择头像');
				return;
			}
			this.showAuthorizeUser = false;
			this.showp = false;
		},
		//获取昵称输入内容
		userNameInput(e){
		    this.nickName = e.detail.value
		},
		async onChooseAvatar(e) {
			const url = await this.uploadFilePromise(e.detail.avatarUrl)
			 this.avatarUrl = url
			 console.log(this.avatarUrl)
		},
		async getInfo() {
			var data = await api.getInfo();
			this.content = data.data.content_protocol_uniapp;
		},
		close() {
			this.showtc = false;
		},
		checkboxChange() {
			this.$set(this, 'protocol', !this.protocol);
			if (this.protocol) {
				this.$set(this, 'showtc', !this.showtc);
			}

			console.log('protocol', this.protocol);
		},
		fanhui() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		tabBarUrl() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},

		
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://qzy.dianteng.cc/admin/uploadImage', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'image',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							var datajson = JSON.parse(res.data);
							console.log('datajson', datajson);
							resolve(datajson.data.url);
						}, 1000);
					}
				});
			});
		},


         async h5dde() {
			if (!this.protocol) {
				this.$util.msg('请阅读用户协议');
				return;
			}
			
			var _this = this;
			var openid = 'oEzOr4mWynFlNzWURtgyTSjwfM0c';
			const res = await auth_api.openidUserInfo({ openid: openid });
			console.log('第三步B,看是不是注册用户', res);
			if (res.data.id) {
				//已经注册
				_this.openid = openid;
				_this.userInfo['phone'] = res.data.phone;
				_this.userInfo['pr'] = res.data.pr;
				_this.id = res.data.id;

				this.loginSuccessCallBack({
					openid: _this.openid,
					userInfo: _this.userInfo
				});
				return;
			}
		},
		
		// 第3方授权登录
		toProviderLogin() {
			
			if (!this.protocol) {
				this.$util.msg('请阅读用户协议');
				return;
			}
			
			
			this.getServiceUserInfo({
				code: this.code
			});
			
			
			
			
			//获得头像，昵称
			
			// uni.getUserProfile({
			// 	desc: 'Wexin', // 这个参数是必须的
			// 	success: infoRes => {
			// 		console.log('第二步获取微信用户信息', infoRes);
			// 		this.userInfo = infoRes.userInfo;
			// 		this.iv = infoRes.iv;
			// 		this.encryptedData = infoRes.encryptedData;
			// 		this.getServiceUserInfo({
			// 			code: this.code
			// 		});
			// 	},
			// 	fail: err => {
			// 		console.log(err);
			// 		uni.hideLoading();
			// 	}
			// });
			
		},
		
		

		//获取code码
		getcode() {
			let that = this;
			uni.login({
				success: function(loginRes) {
					console.log('第一步获取code', loginRes);
					that.code = loginRes.code;
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},

		// 获取应用内的认证授权信息
		async getServiceUserInfo(reqData) {
			let _this = this;
			// 获取openid

			const { code, message, data } = await auth_api.loginByProvider(reqData);
			console.log('第三步获取openid', data);
			if (data.openid) {
				const res = await auth_api.openidUserInfo({ openid: data.openid });
				console.log('第三步B,看是不是注册用户', res);
				if (res.data.id) {
					//已经注册
					_this.openid = data.openid;
					_this.userInfo['phone'] = res.data.phone;
					_this.userInfo['pr'] = res.data.pr;

					this.loginSuccessCallBack({
						openid: _this.openid,
						userInfo: _this.userInfo
					});
					return;
				}
			}

			uni.hideLoading();

			if (code != 200) {
				this.$util.msg(message);
				return;
			}
			let aa = data.openid;
			let bb = data.session_key;
			if (aa && bb) {
				_this.openid = aa;
				_this.session_key = bb;
				this.showAuthorizeUser=true
				return;
			} else {
				this.$util.msg('登录失败');
				this.navTo('/pages/auth/login');
			}
		},

		async getphone(e) {
			//获取code码
			let _this = this;
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				// console.log('154', e);
				_this.iv = e.detail.iv;
				_this.encryptedData = e.detail.encryptedData;
				
				_this.userInfo['nickName'] =_this.nickName
				_this.userInfo['avatarUrl'] =_this.avatarUrl
				
				
				console.log('111',_this.nickName)
				console.log('222',_this.avatarUrl)
				console.log('333',_this.userInfo)
				
			
				
				//获取手机号，增加用户微信信息
				const { code, message, data } = await auth_api.insetDatatwo({
					userInfo: _this.userInfo,
					openid: _this.openid,
					session_key: _this.session_key,
					iv: _this.iv,
					encryptedData: _this.encryptedData
				});

				console.log('第四步获取电话', data);

				_this.userInfo['phone'] = data.phone;
				_this.userInfo['pr'] = data.pr;
			}

			// 登录成功
			this.loginSuccessCallBack({
				openid: _this.openid,
				userInfo: _this.userInfo
			});
		},
		// 登录成功操作 vuex
		loginSuccessCallBack(data) {
			this.$util.msg('登录成功');
			// 状态管理保存用户信息
			this.$store.commit('setToken', data);
			setTimeout(() => {
				// this.navBack();
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 500);
		}
	}
};
</script>

<style scoped lang="scss">
.app {
	padding-top: 300rpx;
}
.u-content {
	background: red;
	width: 700rpx;
	
	margin-top: 10rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
button::after {
	border: none;
}

.imag-logo {
	height: 120rpx;
	width: 110rpx;

	margin-bottom: 20rpx;
}

.logo-v1 {
	margin-bottom: 20rpx;
}

.logo-text1 {
	width: 179rpx;
	height: 32rpx;
	font-size: 32rpx;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #333333;
}

.logo-v2 {
	margin-bottom: 20rpx;
}

.logo-text2 {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #b6b6b6;
}

.input-content {
	width: 580rpx;
	height: 86rpx;
	background: #f34f4f;
	// background: linear-gradient(90deg, #BB73D5, #643A92);
	// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 460rpx;
}

.input-content-qx {
	width: 100%;
	height: 86rpx;
	background: #ffffff;
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 320rpx;

	font-size: 26rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #000000;
}

.input-content-dh {
	width: 580rpx;
	height: 86rpx;
	background: #f34f4f;
	// background: linear-gradient(90deg, #BB73D5, #643A92);
	// box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	line-height: 86rpx;
	position: absolute;
	bottom: 200rpx;
}

.input-content-xy {
	width: 100%;
	height: 60rpx;
	// background: #f2f2f2;
	border-radius: 43rpx;
	text-align: center;
	font-size: 26rpx;
	position: absolute;
	bottom: 260rpx;

	font-size: 26rpx;
	font-family: PingFang;
	font-weight: bold;
	color: #000000;
}

.aeadfe {
	uni-button:after {
		border: 1rpx solid #f2f2f2;
	}
}

.tx {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: #999999;
	line-height: 34rpx;
}

.xiexyi {
	font-size: 23rpx;
	font-family: PingFang;
	font-weight: 500;
	color: red;
	line-height: 34rpx;
}


.auth-card{
    text-align: center;
    .avatar-img{
        width: 150rpx;
        height: 180rpx !important;
        // overflow: hidden;
        // border-radius: 100%;
        // margin-top: 30rpx;
    }
    .title{
        font-size: 20rpx;
    }
    .content{
        margin-top: 10rpx;
    }
}

.auth-btncard{
    .btn-unok{
        width: 50%;
        float: left;
    }
    .btn-ok{
        width: 50%;
        float: left;
        margin: 0;
        padding: 0;
        border: 0px solid transparent;  //自定义边框
        outline: none;    //消除默认点击蓝色边框效果
        u-button{
            margin: 0;
            padding: 0;
            border: 0px solid transparent;  //自定义边框
            outline: none;    //消除默认点击蓝色边框效果
        }
    }
}




</style>


<style>
    .avatar-wrapper{
        width: 150rpx;
        height: 100rpx;
        color: #333 !important;
        text-align: center !important;
        border: none !important;
        border-radius:0 !important;
        background-color:transparent !important;
    }
    .avatar-wrapper::after {
        border: none !important;
    }
    .avatar{
        width: 100rpx;
        height: 100rpx;
        overflow: hidden;
        border-radius: 100%;
    }
</style>
